<template>
  <view class="member-page">
    <!-- 自定义状态栏 -->
    <view class="status-bar safe-area-inset-top"></view>
    
    <!-- 会员信息头部 -->
    <view class="member-header">
      <view v-if="userStore.isLoggedIn" class="member-info">
        <image class="member-avatar" :src="userStore.userAvatar" mode="aspectFill" @click="editProfile"></image>
        <view class="member-details">
          <text class="member-name">{{ userStore.userName }}</text>
          <view class="member-level" :style="{ color: userStore.memberLevelColor }">
            <text class="level-text">{{ userStore.memberLevelName }}</text>
            <view class="level-progress">
              <view class="progress-bg">
                <view 
                  class="progress-bar" 
                  :style="{ 
                    width: userStore.memberProgress + '%', 
                    backgroundColor: userStore.memberLevelColor 
                  }"
                ></view>
              </view>
              <text class="progress-text">{{ Math.round(userStore.memberProgress) }}%</text>
            </view>
          </view>
        </view>
        <view class="member-actions">
          <view class="action-btn" @click="editProfile">
            <text class="icon">✏️</text>
          </view>
        </view>
      </view>
      
      <!-- 未登录状态 -->
      <view v-else class="login-prompt" @click="goToLogin">
        <view class="login-avatar">👤</view>
        <view class="login-text">
          <text class="login-title">点击登录</text>
          <text class="login-subtitle">享受会员专属服务</text>
        </view>
        <text class="login-arrow">→</text>
      </view>
    </view>
    
    <!-- 资产统计 -->
    <view v-if="userStore.isLoggedIn" class="asset-stats">
      <view class="stat-item" @click="goToRecharge">
        <text class="stat-number">¥{{ formatMoney(userStore.balance) }}</text>
        <text class="stat-label">账户余额</text>
      </view>
      <view class="stat-item" @click="goToPoints">
        <text class="stat-number">{{ userStore.points }}</text>
        <text class="stat-label">积分</text>
      </view>
      <view class="stat-item" @click="goToCoupons">
        <text class="stat-number">{{ availableCoupons }}</text>
        <text class="stat-label">优惠券</text>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <scroll-view class="menu-scroll" scroll-y>
      <!-- 订单相关 -->
      <view class="menu-section">
        <text class="section-title">订单服务</text>
        <view class="menu-list">
          <view class="menu-item" @click="goToOrders">
            <view class="menu-icon orders">📋</view>
            <text class="menu-text">我的订单</text>
            <text class="menu-arrow">></text>
          </view>
          <view class="menu-item" @click="goToFavorites">
            <view class="menu-icon favorites">❤️</view>
            <text class="menu-text">收藏座位</text>
            <text class="menu-arrow">></text>
          </view>
        </view>
      </view>
      
      <!-- 会员服务 -->
      <view v-if="userStore.isLoggedIn" class="menu-section">
        <text class="section-title">会员服务</text>
        <view class="menu-list">
          <view class="menu-item" @click="goToRecharge">
            <view class="menu-icon recharge">💰</view>
            <text class="menu-text">账户充值</text>
            <text class="menu-arrow">></text>
          </view>
          <view class="menu-item" @click="goToPoints">
            <view class="menu-icon points">⭐</view>
            <text class="menu-text">积分明细</text>
            <text class="menu-arrow">></text>
          </view>
          <view class="menu-item" @click="goToCoupons">
            <view class="menu-icon coupons">🎫</view>
            <text class="menu-text">我的优惠券</text>
            <view class="menu-badge" v-if="availableCoupons > 0">{{ availableCoupons }}</view>
            <text class="menu-arrow">></text>
          </view>
          <view class="menu-item" @click="goToInvite">
            <view class="menu-icon invite">👥</view>
            <text class="menu-text">邀请好友</text>
            <text class="menu-arrow">></text>
          </view>
        </view>
      </view>
      
      <!-- 设置 -->
      <view class="menu-section">
        <text class="section-title">设置</text>
        <view class="menu-list">
          <view class="menu-item" @click="goToSettings">
            <view class="menu-icon settings">⚙️</view>
            <text class="menu-text">应用设置</text>
            <text class="menu-arrow">></text>
          </view>
          <view class="menu-item" @click="goToHelp">
            <view class="menu-icon help">❓</view>
            <text class="menu-text">帮助中心</text>
            <text class="menu-arrow">></text>
          </view>
          <view class="menu-item" @click="goToAbout">
            <view class="menu-icon about">ℹ️</view>
            <text class="menu-text">关于我们</text>
            <text class="menu-arrow">></text>
          </view>
        </view>
      </view>
      
      <!-- 退出登录 -->
      <view v-if="userStore.isLoggedIn" class="logout-section">
        <button class="logout-btn" @click="logout">
          <text class="logout-text">退出登录</text>
        </button>
      </view>
      
      <!-- 底部间距 -->
      <view class="bottom-spacing safe-area-inset-bottom"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useOrderStore } from '@/stores/order'
import { formatMoney, showConfirm, showSuccess } from '@/utils/common'

const userStore = useUserStore()
const orderStore = useOrderStore()

// 响应式数据
const availableCoupons = ref(3)

// 方法
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  })
}

const editProfile = () => {
  uni.navigateTo({
    url: '/pages/member/profile'
  })
}

const goToOrders = () => {
  uni.switchTab({
    url: '/pages/order/order'
  })
}
// 账户充值
const goToRecharge = () => {
  if (!userStore.isLoggedIn) {
    goToLogin()
    return
  }
  uni.navigateTo({
    url: '/pages/member/recharge'
  })
}
// 积分明细
const goToPoints = () => {
  if (!userStore.isLoggedIn) {
    goToLogin()
    return
  }
  uni.navigateTo({
    url: '/pages/member/points'
  })
	
}

const goToCoupons = () => {
  if (!userStore.isLoggedIn) {
    goToLogin()
    return
  }
  alert('功能暂未开发...')
  // uni.navigateTo({
  //   url: '/pages/member/coupons'
  // })
}

const goToFavorites = () => {
  // uni.navigateTo({
  //   url: '/pages/member/favorites'
  // })
	alert('功能暂未开发...')
}

const goToInvite = () => {
  // uni.navigateTo({
  //   url: '/pages/member/invite'
  // })
	alert('功能暂未开发...')
}

const goToSettings = () => {
  // uni.navigateTo({
  //   url: '/pages/member/settings'
  // })
	alert('功能暂未开发...')
}

const goToHelp = () => {
  // uni.navigateTo({
  //   url: '/pages/common/help'
  // })
	alert('功能暂未开发...')
}

const goToAbout = () => {
  // uni.navigateTo({
  //   url: '/pages/common/about'
  // })
	alert('功能暂未开发...')
}

const logout = async () => {
  const confirmed = await showConfirm('确定要退出登录吗？')
  if (confirmed) {
    userStore.logout()
    showSuccess('已退出登录')
  }
}

// 生命周期
onMounted(() => {
  // 检查登录状态
  if (!userStore.isLoggedIn) {
    uni.showModal({
      title: '请先登录',
      content: '访问会员中心需要先登录账户',
      confirmText: '去登录',
      cancelText: '返回首页',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        } else {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      }
    })
    return
  }

  // 如果已登录，初始化订单数据
  if (orderStore.orders.length === 0) {
    orderStore.initMockOrders()
  }
})
</script>

<style lang="scss" scoped>
.member-page {
  min-height: 100vh;
  background: var(--color-background);
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 44px;
  background: linear-gradient(135deg, var(--color-premium), var(--color-primary));
}

// 会员信息头部
.member-header {
  background: linear-gradient(135deg, var(--color-premium), var(--color-primary));
  padding: 20px 16px 32px;
  color: white;
}

.member-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.member-avatar {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  transition: all var(--transition-normal);

  &:active {
    transform: scale(0.95);
  }
}

.member-details {
  flex: 1;
}

.member-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
}

.member-level {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.level-text {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

.level-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bg {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width var(--transition-normal);
}

.progress-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  min-width: 30px;
}

.member-actions {
  .action-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);

    &:active {
      transform: scale(0.9);
    }

    .icon {
      font-size: 16px;
    }
  }
}

// 未登录提示
.login-prompt {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all var(--transition-normal);

  &:active {
    transform: scale(0.98);
  }
}

.login-avatar {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border: 4px solid rgba(255, 255, 255, 0.3);
}

.login-text {
  flex: 1;
}

.login-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
  display: block;
}

.login-subtitle {
  font-size: 14px;
  opacity: 0.8;
}

.login-arrow {
  font-size: 24px;
  opacity: 0.8;
}

// 资产统计
.asset-stats {
  background: white;
  margin: -16px 16px 16px;
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  justify-content: space-around;
  box-shadow: var(--shadow-lg);
}

.stat-item {
  text-align: center;
  transition: all var(--transition-normal);

  &:active {
    transform: scale(0.95);
  }
}

.stat-number {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-text-primary);
  display: block;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}

// 菜单滚动区域
.menu-scroll {
  flex: 1;
  padding: 0 16px;
}

.menu-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  margin-left: 4px;
  display: block;
}

.menu-list {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-normal);

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background: var(--color-background);
  }
}

.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 18px;

  &.orders {
    background: rgba(255, 149, 0, 0.1);
  }

  &.favorites {
    background: rgba(255, 59, 48, 0.1);
  }

  &.recharge {
    background: rgba(52, 199, 89, 0.1);
  }

  &.points {
    background: rgba(255, 204, 0, 0.1);
  }

  &.coupons {
    background: rgba(175, 82, 222, 0.1);
  }

  &.invite {
    background: rgba(0, 122, 255, 0.1);
  }

  &.settings {
    background: rgba(142, 142, 147, 0.1);
  }

  &.help {
    background: rgba(52, 199, 89, 0.1);
  }

  &.about {
    background: rgba(0, 122, 255, 0.1);
  }
}

.menu-text {
  flex: 1;
  font-size: 16px;
  color: var(--color-text-primary);
  font-weight: 500;
}

.menu-badge {
  background: var(--color-error);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  margin-right: 8px;
  min-width: 16px;
  text-align: center;
}

.menu-arrow {
  font-size: 14px;
  color: var(--color-text-tertiary);
}

// 退出登录
.logout-section {
  margin-top: 32px;
  margin-bottom: 24px;
}

.logout-btn {
  width: 100%;
  background: white;
  border: 2px solid var(--color-error);
  border-radius: var(--radius-xl);
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-error);
  transition: all var(--transition-normal);

  &:active {
    background: var(--color-error);
    color: white;
    transform: scale(0.98);
  }
}

.logout-text {
  color: inherit;
}

.bottom-spacing {
  height: 20px;
}

// 响应式适配
@media (max-width: 375px) {
  .member-header {
    padding: 16px 12px 24px;
  }

  .member-avatar,
  .login-avatar {
    width: 60px;
    height: 60px;
    border-radius: 30px;
  }

  .member-name {
    font-size: 20px;
  }

  .login-title {
    font-size: 18px;
  }

  .asset-stats {
    margin: -12px 12px 12px;
    padding: 16px;
  }

  .stat-number {
    font-size: 18px;
  }

  .menu-scroll {
    padding: 0 12px;
  }

  .menu-item {
    padding: 14px 16px;
  }

  .menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    font-size: 16px;
  }

  .menu-text {
    font-size: 15px;
  }
}
</style>
